
<template>
	<view class="content">
		<!-- 顶部描述 -->
		<view class="res_info">
			<text class="info_tit">住户信息</text>
			<view class="info_item">
				<text>户主</text> 
				<!-- <input class="info_input" type="text" placeholder="输入户主姓名" v-model.trim="owner"> -->
				<span class='info_input'>{{owner}}</span>
			</view>
			
			<view class="info_item">
				<text>住户</text>
				<!-- <input class="info_input" type="text" placeholder="输入住户门牌" v-model.trim="addr"> -->
				<span class='info_input'>{{addr}}1</span>
			</view>
			
			<view class="info_item">
				<text>联系方式</text>
				<!-- <input class="info_input" type="text" placeholder="输入联系方式" v-model.trim="mobile"> -->
				<span class='info_input'>{{mobile}}1</span>
			</view>
		</view>
		<!-- 下方内容区 -->
		<view class="sub_con"> 
			<!-- 标签 上 -->
			<view class="con_top">    
				<text style="font-weight: 700;">报修类型</text>
				<view class="label_list">
					<block v-for="item in labelList" :key="item.id">
						<text class="label_item" :class="current === item.id? 'isSelectLabels' : ''" @click="btnLable(item.id)">{{item.name}}</text>
					</block> 
				</view>
			</view>
			<!-- 具体内容建议 -->
			<view class="con_deta"> 
				<text style="font-weight: 700;">情况描述</text>
				<view class="message">
					<textarea maxlength="200"  class="textarea" name="" id="" cols="30" rows="10" placeholder="在这里输入内容字数不超过200字" v-model.trim="content"> </textarea>
				</view>
			</view>
			<!-- 上传图片 -->
			<view class="add-img-box">
				<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
					<image class="add-img" @click="imgInfo(index)" :src="item" mode="aspectFill"></image>
					<image  class="add-img-del" @click="delImg(index)" :src="imgUrl+'/static/wap/infoImg/delete.png'"></image>
				</view>
				<view v-if="imgList.length < 3 " class="add-img-item" @click="uploadImg">
					<image class="add-img" :src="imgUrl+'/static/wap/infoImg/shangtu@2x.png'"></image>
				</view>
				<text class="rem_img">{{imgList.length}}/3</text>
			</view>
			<!-- 提交按钮 -->
			<view class="sub_btn" @click="addRepair">
				提 交
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../static/util.js'
	export default {
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				// 标签列表
				labelList:'',
				// 当前选中
				current: 0,
				imgList: [],
				cloudimgList: [],
				imgCount: 3,//最多支持3张上传 
				owner:'',
				mobile:'',
				addr:'',
				type:'',
				content:'',
				path:'',
				localImg:[],
				submitFlag:true,
				userName:""
			};
		},
		onLoad(){
			this.getRepairTypeList()
		},
		onShow() { 
			  var value = uni.getStorageSync('userInfo');
			  if(value){  
				  this.owner = value.truename?value.truename:''
				  this.mobile = value.mobile? value.mobile:''
				  this.addr = value.room_number? value.room_number:''
			  }
		},
		methods:{
			uploadImg(){
				var that=this;
					uni.chooseImage({
					count: 3, //默认9
					sourceType:['album','camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) =>{ 
						this.localImg=res.tempFilePaths
						this.upload(this.localImg,this.localImg.length-1,0)
					},
					fail(res){
					console.log(res);	
					} 
				});
			},
			upload(arr,limit,n){
				if(n>limit){
					uni.showToast({
							title:'上传成功'
						}); 
					return
				}
				this.$upload({
					path:arr[n],
					success:(res2)=>{
						if(typeof res2== 'string'){
							res2=JSON.parse(res2)
						}
						if(res2.code!=200){
							uni.showToast({
								title:res2.msg,
								icon:"none"
							})
							this.imgList=[]
							return
						}
			
						this.imgList.push(res2.data.all_path) 
						this.upload(this.localImg,this.localImg.length-1,n)
						//保存头像
					},   
					fail:function fail(res2){
						console.log(res2)
						uni.showToast({
								title:'请稍后再试',
								icon:'none'
							});
					},
					complete:function complete(){
						console.log(111)
					}
				})
			},
			addRepair(){
				var that=this;
				if(this.owner.length==0){
					uni.showToast({
						title:'请输入户主姓名',
						icon:"none"
					})
					return
				}
				if(this.owner.length==0){
					uni.showToast({
						title:'请输入户主姓名',
						icon:"none"
					})
					return
				}
				if(this.addr.length==0){
					uni.showToast({
						title:'请输入住户门牌',
						icon:"none"
					})
					return
				}
				if(this.mobile.length==0){
					uni.showToast({
						title:'请输入联系方式',
						icon:"none"
					})
					return
				}
				if(this.content.length==0){
					uni.showToast({
						title:'请输入情况描述',
						icon:"none"
					})
					return
				}
				if(!this.submitFlag){
					return
				}
				this.submitFlag=false
				var data={}
					data.owner=that.owner
					data.mobile=that.mobile
					data.addr=that.addr
					data.type=that.type
					data.content=that.content
				var str=''
				if(this.imgList.length>1){
					for(var i=0;i<this.imgList.length;i++){
						str+=this.imgList[i]+','
					}
					str=str.slice(0,-1)
				}else if(this.imgList.length==1){
					str=this.imgList[0]
				}
				 
				if(str){
					data.path=str
				}
				that.ajax({
					url:'api/repair/addRepair',
					method:'POST',
					data,
					success:function(res){
						if(res.code==200){
							
							
							setTimeout(() => {
								uni.showToast({
									title:"保修成功",
									icon:'none',
									success(){
										// uni.navigateBack()
										setTimeout(() => {
											uni.navigateBack()
											that.submitFlag=true
										}, 300)
									}
								});
							}, 100)
							
						}else{
							uni.showToast({
								title:"" + res.msg,
								icon:'none',
								success() {
									that.submitFlag=true
								}
							});
						}
					},
					fail:function(e){
						that.submitFlag=true
					}
				  })
			},
			getRepairTypeList(){
				var that=this;
				that.ajax({
					url:'api/repair/getRepairTypeList',
					data:{
					},
					success:function(res){ 
						that.labelList=res.data
						that.current=res.data[0].id
						that.type=res.data[0].id
					}
				  })
			},
			btnLable(id){
				this.current = id 
				this.type=id;
			},
			// 查看大图
			imgInfo(i) {
				let tempList = [];
				this.imgList.forEach(img => {
					tempList.push(img.path);
				}); 
				//显示图片
				uni.previewImage({
					current: i,
					loop: false,
					urls: tempList,
					indicator: 'default'
				});
			},
			// 删除图片
			delImg(i) {
				uni.showModal({
					content: '确定删除这张吗',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(i, 1);
							this.imgCount++;
						} else if (res.cancel) {
							
						}
					}
				});
			},
			// 点击上传
			openCamera() { 
				uni.chooseImage({
					sourceType:['camera'],
					count: this.imgCount,
					sizeType: ['compressed'],
					success: e => {
						this.imgList = [...this.imgList, ...e.tempFiles]; 
						this.imgCount = 3 - this.imgList.length; 
					}
				});
			},
			// 提交按钮
			// submit(e) {
			// 	this.submitData = null;
			// 	if (this.imgList.length < 1) {
			// 		uni.showToast({
			// 			title: '请添加图片',
			// 			icon: 'none'
			// 		});
			// 		return false;
			// 	}
			// 	uni.showLoading({
			// 		title: '上传图片',
			// 		mask: false
			// 	});
			// 	for (let i = 0; i < this.imgList.length; i++) {
			// 		console.log("test！"+this.imgList[i].path);			
			// 		this.$cloud.uploadFile({
			// 			filePath: this.imgList[i].path,
			// 			success: (res) => {
			// 				//保存图片的路径
			// 				this.cloudimgList.push(res.fileID);
			// 			},
			// 			fail: (err) => {
			// 				console.log(err);
			// 			},
			// 			complete: () => {
			// 				//uni.hideLoading();
			// 				if (this.cloudimgList.length == this.imgList.length) {
			// 					uni.hideLoading();
			// 					uni.showToast({
			// 						title: '全部上传成功！',
			// 						icon: 'none'
			// 					});
			// 				}
			// 			}
			// 		})
			// 		}
			// },
		}
	}
</script>

<style lang="less" scoped>
	.content{
		padding-bottom: 40rpx;
	}
	.res_info{
		margin: 0 30rpx;
		height: 415rpx;
		font-size: 30rpx;
		color: #333; 
		.info_tit{
			color: #333;
			font-size: 34rpx;
			font-weight: 700;
		}
		.info_item{
			display: flex;
			justify-content: space-between;
			height: 121rpx;
			line-height: 121rpx;
			border-bottom: 2rpx solid #f5f5f5;
			& text:nth-child(2){
				color: #999;
			}
			.info_input{
				margin: auto 0;
				width: 280rpx;
			}
		}
	}
	
	.sub_con{
		position: relative;
		margin: 0 30rpx;  
		.con_top{
			font-size: 32rpx;
			color: #616161;
			height: 300rpx;    
			.label_list{ 
				margin-top: 20rpx;
				padding: 20rpx 0;
				.label_item{
					display: inline-block;
					margin: 0 20rpx 30rpx 0; 
					padding: 0 20rpx;
					min-width: 160rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					font-size: 28rpx;
					border-radius: 32rpx;
					background-color: #F3F3F5;
				}
			}
		}
		.con_deta{
			font-size: 32rpx;
			color: #616161;   
			.message{ 
				margin-top: 28rpx;
				height: 358rpx; 
				.textarea{  
					width: calc(100% - 50rpx);
					height: calc(100% - 50rpx);
					padding: 25rpx;
					background-color: #F3F3F5;
					border-radius: 15rpx;
				}
			}
		}
		.sub_btn{
			margin-top: 106rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
			background-color: #2AABAD;
			border-radius: 45rpx;
		}
	}
	
	.add-img-box {
		position: absolute;
		bottom: 220rpx;
		display: flex; 
		height: 100rpx;
		padding-left: 10rpx;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.add-img-item { 
		width: 100rpx;
		height: 100rpx;
		border-radius: 24rpx;
		position: relative;
		padding: 9rpx 0;
		margin-left: 20rpx;
	}
	.add-img-camera {
		flex: 1;
	}
	.add-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 24rpx;
	}
	.add-img-del {
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		right: 8rpx;
		top: 17rpx; 
		border-radius: 20rpx;
	}
	.address-time {
		width: 484rpx;
		height: 88rpx;
		background-color: rgba(245, 245, 245, 1);
		opacity: 1;
		border-radius: 24rpx;
		text-align: center;
	
		font-size: 35rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	} 
	.rem_img{
		padding: 64rpx 0 0 40rpx;
		font-size: 30rpx;
		color: #9E9EA0;
	}
</style>
